<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传图片到钉钉</title>
    <!--<link rel="icon" type="image/png" sizes="64x64" href="https://static.dingtalk.com/media/lALPJxf-uiAg5AFAQA_64_64.png">-->
    <link rel="icon" type="image/png" sizes="64x64"
        href="https://static.dingtalk.com/media/lALPJx8Zt51ep9FAQA_64_64.png">
    <link rel="stylesheet" type="text/css"
        href="https://fastly.jsdelivr.net/gh/Nomeqc/static@latest/js/img-upload/normalize.css" />
    <link rel="stylesheet" type="text/css"
        href="https://fastly.jsdelivr.net/gh/Nomeqc/static@latest/js/img-upload/demo.css">
    <link href="https://fastly.jsdelivr.net/gh/Nomeqc/static@master/js/img-upload/styles.imageuploader.css"
        rel="stylesheet" type="text/css">
    <style>
        .copy-btn {
            position: relative;
            display: inline-block;
            padding: 6px 8px;
            font-family: inherit;
            font-weight: 600;
            line-height: 20px;
            white-space: nowrap;
            vertical-align: middle;
            cursor: pointer;
            user-select: none;
            border-radius: 6px;
            appearance: none;
            text-decoration: none;
            text-align: center;
            font-size: 14px;
            color: rgb(36, 41, 47);
            background-color: transparent;
            border: none;
        }
    </style>
</head>

<body>
    <section role="main" class="l-main" style="margin-top:50px;margin-bottom:50px;">
        <header class="site-header">
            <h1 class="site-title l-site-title" style="font-size:1.2em;">上传图片到钉钉（支持JPG、PNG、GIF格式图片）</h1>
        </header>
        <div class="uploader__box js-uploader__box l-center-box">
            <ul class="js-uploader__file-list uploader__file-list"></ul>
            <div class="js-uploader__contents uploader__contents">
                <p class="js-uploader__instructions uploader__instructions">你可以选择或拖拽多个文件</p><input
                    style="height: 0; width: 0;" id="fileinput0" type="file" multiple=""
                    class="js-uploader__file-input uploader__file-input"><label for="fileinput0"
                    style="cursor: pointer;" class="js-uploader__file-label uploader__file-label">请选择或拖拽文件</label>
            </div>
            <button class="js-uploader__submit-button uploader__submit-button uploader__hide">上传选择的文件<i
                    class="js-uploader__icon fa fa-upload uploader__icon"></i></button>
        </div>
        <p class="js-uploader__further-instructions uploader__further-instructions uploader__hide">你可以选择或拖拽更多的文件<input
                style="height: 0; width: 0;" id="secondaryfileinput0" type="file" multiple=""
                class="js-uploader__file-input uploader__file-input"><label for="secondaryfileinput0"
                style="cursor: pointer;"
                class="js-uploader__file-label uploader__file-label uploader__file-label--secondary">选择更多的文件</label></p>
    </section>
    <script src="https://cdn.jsdelivr.net/gh/Nomeqc/static@latest/js/img-upload/jquery-1.11.0.min.js"
        type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/Nomeqc/static@1.0.18/js/img-upload/jquery.imageuploader.js"
        type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/Nomeqc/static@latest/js/img-upload/dingtalk.upload.js"
        type="text/javascript"></script>

    <script type="text/javascript">

        function parseElement(htmlString) {
            return new DOMParser().parseFromString(htmlString, 'text/html').body.firstChild;
        }

        function copyToClipboard(text) {
            if (window.clipboardData && window.clipboardData.setData) {
                // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
                return window.clipboardData.setData("Text", text);
            }
            if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
                var textarea = document.createElement("textarea");
                textarea.textContent = text;
                // Prevent scrolling to bottom of page in Microsoft Edge.
                textarea.style.position = "fixed";
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    // Security exception may be thrown by some browsers.
                    return document.execCommand("copy");
                } catch (ex) {
                    console.warn("Copy to clipboard failed.", ex);
                    return false;
                } finally {
                    document.body.removeChild(textarea);
                }
            }
        }

        function uploadFiles(files) {
            if (files.length == 0) {
                console.log('没有可上传的文件')
                return
            }
            function upload(file) {
                return new Promise((resolve, reject) => {
                    let readImageWH = img_base64 => {
                        return new Promise((resolve, reject) => {
                            var image = new Image();
                            image.src = img_base64;
                            image.onload = function () {
                                var height = this.height;
                                var width = this.width;
                                if (height > 0 || width > 0) {
                                    resolve({
                                        width: width,
                                        height: height
                                    })
                                    return true;
                                }
                                reject('图片加载出错')
                                return false;
                            }
                        })
                    }
                    let base64URI = file['base64']
                    let format = file['format']
                    readImageWH(base64URI).then(function (img_wh) {
                        return new Promise((resolve, reject) => {
                            const updateProgressText = (progressText) => {
                                let progressEle = document.querySelector(`ul > li[data-index="${file.id}"] > span.progress`);
                                progressEle.innerText = progressText;
                            }
                            updateProgressText('0%')
                            let base64Str = base64URI.split(",")[1];
                            let uploader = new DingtalkImageUploader(base64Str, media_id => {
                                let image_url = `https://static.dingtalk.com/media/${media_id}_${img_wh.width}_${img_wh.height}.${format}`
                                console.log('图片地址：', image_url)
                                let linkContainer = document.querySelector(`ul > li[data-index="${file.id}"] > span.link`);
                                linkContainer.innerHTML = `<a href="${image_url}" target="_blank"><svg t="1635092749855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6784" width="32" height="32"><path d="M573.44 640a187.68 187.68 0 0 1-132.8-55.36L416 560l45.28-45.28 24.64 24.64a124.32 124.32 0 0 0 170.08 5.76l1.44-1.28a49.44 49.44 0 0 0 4-3.84l101.28-101.28a124.16 124.16 0 0 0 0-176l-1.92-1.92a124.16 124.16 0 0 0-176 0l-51.68 51.68a49.44 49.44 0 0 0-3.84 4l-20 24.96-49.92-40L480 276.32a108.16 108.16 0 0 1 8.64-9.28l51.68-51.68a188.16 188.16 0 0 1 266.72 0l1.92 1.92a188.16 188.16 0 0 1 0 266.72l-101.28 101.28a112 112 0 0 1-8.48 7.84 190.24 190.24 0 0 1-125.28 48z" fill="#333333" p-id="6785"></path><path d="M350.72 864a187.36 187.36 0 0 1-133.28-55.36l-1.92-1.92a188.16 188.16 0 0 1 0-266.72l101.28-101.28a112 112 0 0 1 8.48-7.84 188.32 188.32 0 0 1 258.08 7.84L608 464l-45.28 45.28-24.64-24.64A124.32 124.32 0 0 0 368 478.88l-1.44 1.28a49.44 49.44 0 0 0-4 3.84l-101.28 101.28a124.16 124.16 0 0 0 0 176l1.92 1.92a124.16 124.16 0 0 0 176 0l51.68-51.68a49.44 49.44 0 0 0 3.84-4l20-24.96 50.08 40-20.8 25.12a108.16 108.16 0 0 1-8.64 9.28l-51.68 51.68A187.36 187.36 0 0 1 350.72 864z" fill="#333333" p-id="6786"></path></svg></a>`;
                                let copyContainer = document.querySelector(`ul > li[data-index="${file.id}"] > span.copy`);
                                // let copyBtn = parseElement(`<button aria-label="Copy to clipboard" class="copy-btn"><svg aria-hidden="true" role="img" class="StyledOcticon-uhnt7w-0 kbvVDR" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" style="display: inline-block;user-select: none;vertical-align: text-bottom;overflow: visible;"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg></button>`)
                                let copyBtn = parseElement(`<button aria-label="Copy to clipboard" class="copy-btn"><svg t="1635097607144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5812" width="22" height="22"><path d="M703.351467 895.249067a63.8976 63.8976 0 0 1-63.965867 63.829333H127.931733a63.8976 63.8976 0 0 1-63.965866-63.829333V384.273067c0-35.293867 28.672-63.829333 63.965866-63.829334h63.8976v-63.8976h-63.8976A127.7952 127.7952 0 0 0 0 384.341333v510.976a127.658667 127.658667 0 0 0 127.863467 127.726934h511.3856a127.658667 127.658667 0 0 0 127.863466-127.658667v-63.8976h-63.8976v63.829333z m191.761066-894.293334H383.658667a127.7952 127.7952 0 0 0-127.863467 127.7952V639.658667c0 70.519467 57.207467 127.658667 127.863467 127.658666h511.522133c70.656 0 127.7952-57.207467 127.7952-127.658666V128.750933A127.7952 127.7952 0 0 0 895.112533 1.024z m63.965867 638.7712a63.829333 63.829333 0 0 1-63.8976 63.829334H383.658667a63.8976 63.8976 0 0 1-63.8976-63.829334V128.750933c0-35.2256 28.672-63.829333 63.8976-63.829333h511.522133c35.293867 0 63.8976 28.603733 63.8976 63.829333v510.976z" p-id="5813"></path></svg></button>`)

                                copyBtn.addEventListener('click', function () {
                                    if (copyToClipboard(image_url)) {
                                        let parent = this
                                        let svg = this.querySelector('svg')
                                        let newSvg = parseElement(`<svg t="1635096803823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2463" width="22" height="22"><path d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z" fill="#444444" p-id="2464"></path></svg>`)
                                        parent.replaceChild(newSvg, svg)
                                        setTimeout(function () {
                                            parent.replaceChild(svg, newSvg)
                                        }, 1000)
                                    }
                                })
                                copyContainer.appendChild(copyBtn)
                                file['uploaded'] = true
                                resolve()
                            }, progress => {
                                updateProgressText(Math.round(progress * 100) + '%')
                                console.log(`进度：${Math.round(progress * 100)}%`)
                            }, error => {
                                reject(error)
                                updateProgressText(error);
                                console.log('upload error:' + error)
                            });
                            uploader.upload();
                        })
                    }).finally(() => {
                        resolve()
                        // console.log('finally');
                    });
                });
            }

            const queue = async (files) => {
                let data = []
                for (var i = 0; i < files.length; i++) {
                    let file = files[i];
                    let ret = await upload(file)
                    data.push(ret)
                }
                return data
            }
            queue(files).then(data => {
                console.log(data);
                console.log("done");
            });
        }

        (function () {
            var options = {};
            $('.js-uploader__box').uploader({
                'selectButtonCopy': '请选择或拖拽文件',
                'instructionsCopy': '你可以选择或拖拽多个文件',
                'submitButtonCopy': '上传选择的文件',
                'furtherInstructionsCopy': '你可以选择或拖拽更多的文件',
                'secondarySelectButtonCopy': '选择更多的文件',
                'uploadFiles': function (files) {
                    // console.log(files);
                    console.log('start upload...')
                    uploadFiles(files);
                }
            });
        }());
    </script>
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;">
        <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
    </div>


</body>

</html>